import { Canvas, useThree } from "@react-three/fiber";
import styled from "styled-components";
import { Scence } from "./components/Scence";
import { Map } from "./components/Map";
import * as THREE from "three";
import { Marker } from "./components/marker";
import { useEffect, useRef } from "react";
// 引入CSS2渲染器CSS2DRenderer
import { CSS2DRenderer } from "three/addons/renderers/CSS2DRenderer.js";
import gsap from "gsap";
const Box = styled.div`
  width: 100%;
  height: 700px;
  position: relative;
  /* background-color: red; */
`;
export function Earth() {
  const parantElement = useRef<HTMLDivElement>(null);
  const css2Renderer = useRef(new CSS2DRenderer());
  const init = () => {
    if (parantElement.current) {
      const { width, height } = parantElement.current.getBoundingClientRect();
      parantElement.current!.appendChild(css2Renderer.current.domElement);
      css2Renderer.current.domElement.style.position = "absolute";
      css2Renderer.current.domElement.style.pointerEvents = "none";
      css2Renderer.current.setSize(width, height);
    }
  };
  
  useEffect(() => {
    init();
  }, []);
  return (
    <Box ref={parantElement}>
      <Canvas
        scene={{ background: new THREE.Color(0x000000) }}
        style={{ position: "absolute" }}
      >
        <Scence></Scence>
        <Map></Map>
        <Marker CSS2DRenderer={css2Renderer.current}></Marker>
      </Canvas>
    </Box>
  );
}
